<!-- 表单的筛选 -->
<template>
    <div class="icon_select_group">
        <el-button-group>
            <template v-for="item in icons" :key="item">
                <el-button type="primary" plain :icon="item" size="small" @click="onClickRefButton(item)"></el-button>
            </template>
        </el-button-group>
        <el-row type="flex" align="top" class="mt-1">
            <el-input v-model="data" style="width:400px" placeholder="el-icon-eleme"></el-input>
            <a class="ml-2 font_small" href="https://element.eleme.cn/#/zh-CN/component/icon" target="_blank">点击参考地址</a>
        </el-row>
    </div>

</template>


<script lang="ts">
import { defineComponent,ref } from 'vue'

export default defineComponent({
  name: 'IconSelectGroup',
  components: {    
  },
  props:{
    // 是否显示标题
    showTitle:{
      type: Boolean,
      default: true,
      required: false
    },

  },
  data(){
    return {
      data : '',  
      options : [],
      icons : [
            "el-icon-setting",
            "el-icon-user",
            "el-icon-house",
            "el-icon-data-line",
            "el-icon-pie-chart",
            "el-icon-news",
            "el-icon-data-analysis",
            "el-icon-search",
            "el-icon-odometer",
            "el-icon-reading",
            "el-icon-d-arrow-right",
            "el-icon-d-arrow-left"
      ]
    }
  },

  methods:{

    init(suc?:any) {

    },

    setData(val:any){
      console.log("icon set ", val)
      this.data = val;
    },

    clear() {
      this.data = "";
    },

    onDataChanged(val:any){
      this.data = val;
    },

    emitChange(){
        this.$emit("onValueChanged",this.data);
    },

    onClickRefButton(val:any){
        this.data = val;
    }

  },

  watch: {
    data: function(oldval:any,newval:any){
      this.$emit("onDataChanged",this.data);
    }
  },

  created() {
     this.init();
  },

  mounted(){
     
  },

  setup(){
    const baseSelect = ref();


    return {
      baseSelect
    }

    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.icon_select_group{
    display: flex;
    flex-direction: column;
}


</style>
